Vue中监听vuex数据变化（a组件修改vuex内数据，b组件内触发相应函数） |
您所在的位置：网站首页 › vuex 实时更新 › Vue中监听vuex数据变化（a组件修改vuex内数据，b组件内触发相应函数） |
Vue中监听vuex数据变化（a组件修改vuex内数据，b组件内触发相应函数）
|
写了一个新闻类的小网站，客户提出的要求，必须使用导航栏。 因为新闻分类太多，我最初的想法是做成一个类似掌阅官网的导航模式。在index组件内渲染分类导航。 一开始，我是不太想要使用vuex的。但是经过了小半天的踩坑，一直没有做到自己想要的结果。最后还是选择了使用vuex。 在安装vuex的时候，遇到了一个安装时的问题。 懒得去想因为啥了，开始怼需求了 首先，设置vuex，在脚手架内安装vuex后，会在根目录下生成一个store.js文件。 // vuex配置文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 全局共享数据 state: { }, // 变更state内数据 mutations: { }, actions: {} })相应的，mian.js内，脚手架也做好相关文件的引用配置 import store from './store' new Vue({ router, store, render: h => h(App) }).$mount('#app')下面就是要分析，自己需要进行的操作了。 首先，要在state: { },内，添加自己需要的全局参数。 其次，在mutations: { }内，添加自己需要修改全局参数的函数。 export default new Vuex.Store({ // 全局共享数据 state: { // 首页导航栏分类导航点击查询文章 indexSearchClass: '123' }, // 变更state内数据 mutations: { // id是你要传递的参数 changeSearchClass(state,id){ state.indexSearchClass=id } }, actions: {} })然后，在a组件，设置点击导航栏触发的函数，在函数内调用修改全局参数的函数，进行参数值的修改 import {mapState,mapMutations} from 'vuex' methods: { // 保存链接激活状态 saceNacstate(activePath) { window.sessionStorage.setItem('activeIndex', activePath) // 调用store.js内的函数 this.$store.commit('changeSearchClass',activePath) this.$router.push({ path: this.redirect || '/' }, onComplete => { }, onAbort => { }) }, }最后，在b组件内，监听全局参数的变化，参数变化后调用b组件内需要触发的函数 import {mapState,mapMutations} from 'vuex' computed:{ listData(){ return this.$store.state.indexSearchClass } }, watch:{ listData (newVal, oldVal) { // 数据变化后，调用b组件内的函数 this.getIndexArticles() } },最后，导航栏点击相关分类，实现index页面内查询相关信息完美实现 |
这样的话，就不用在home组件内头部渲染导航条。 
但是，根据种种原因，必须设计成home组件头部使用导航的形式。
看到此类问题，我就十分头疼。果断npm uninstall vuex ，把vuex卸载。回到脚手架内重新下载，说来也 奇怪，在脚手架内一发入魂，直接下载成功。
【本文地址】